<template>
  <div class="tag-log-title">
    <div class="title-box">
      <div class="box-left">
        <el-image
          class="logo-img"
          style="height: 50px; width: 145px"
          src="/logo.svg"
          fit="contain"
          @click="toPath('/')"
        />
        <div class="wire" />
        <div class="page-name font-[500]">
          {{ headerTip }}
        </div>
      </div>
      <div><slot /></div>
    </div>
  </div>
</template>

<script setup>
// 1. 接收 props
defineProps({
  headerTip: String,
})

// 2. 路由跳转方法
const router = useRouter()
const toPath = (url) => {
  router.push(url)
}

// // 3. 图片资源
// const logoUrl = computed(() => {
//   return new URL('@/assets/images/logo-w.png', import.meta.url).href
// })
</script>

  <style lang="scss" scoped>
  .tag-log-title {
    width: 100%;
    height: 80px;
    // border-bottom: 1px solid rgba(217, 217, 217, 1);
    background: #fff;

    .title-box {
      min-width: 1200px;
      max-width: 1440px;
      padding: 0 30px 0 12px;
      height: 80px;
      display: flex;
      justify-content: space-between;
      margin: 0 auto;

      .box-left {
        flex: 1;
        display: flex;
        align-items: center;
        height: 80px;

        .logo-img {
          width: 130px;
          height: 33px;
          cursor: pointer;
        }

        .wire {
          width: 1px;
          height: 32px;
          margin: 0 20px;
          background: #333;
        }

        .page-name {
          font-size: 24px;
          font-weight: 400;
          color: #333;
        }
      }
    }
  }
  </style>
